<template>
    <div class="doubao-size">
        <editor-title title="图片尺寸" tips="指定生成图像的宽高比" />

        <div class="grid grid-cols-4 gap-x-4">
            <div
                v-for="(item, index) in pictureSize.lists"
                :key="index"
                class="picture-size"
                :class="{ 'active': value == item.value }"
                @click="value = item.value"
            >
                <div class="flex justify-center items-center mt-[10px] h-[20px]">
                    <div class="rect" :class="item.class"></div>
                </div>
                <div class="text-base text-[#101010] dark:text-white mt-[4px] size-scale">
                    {{ item.scale }}
                </div>
                <div class="text-xs text-[#798696] dark:text-white mt-[4px] size-name">
                    {{ item.name }}
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useVModels } from '@vueuse/core'
import editorTitle from '../common/editor-title.vue'

const emits = defineEmits<{
    (event: 'update:modelValue', value: string): void
}>()

const props = defineProps({
    // 绘制尺寸
    modelValue: {
        type: String,
        default: '1:1'
    }
})

const { modelValue: value } = useVModels(props, emits)

const pictureSize = reactive({
    lists: [
        {
            name: '头像图',
            scale: '1:1',
            value: '512x512',
            class: 'w-[20px] h-[20px]'
        },
        {
            name: '文章配图',
            scale: '4:3',
            value: '512x384',
            class: 'w-[20px] h-[15px]'
        },
        {
            name: '媒体配图',
            scale: '3:4',
            value: '384x512',
            class: 'w-[15px] h-[20px]'
        },
        {
            name: '横版名片',
            scale: '3:2',
            value: '512x341',
            class: 'w-[20px] h-[14px]'
        },
        {
            name: '小红书图',
            scale: '2:3',
            value: '341x512',
            class: 'w-[13px] h-[20px]'
        },
        {
            name: '电脑壁纸',
            scale: '16:9',
            value: '512x288',
            class: 'w-[20px] h-[12px]'
        },
        {
            name: '宣传海报',
            scale: '9:16',
            value: '288x512',
            class: 'w-[13px] h-[20px]'
        }
    ]
})
</script>

<style scoped lang="scss">
.picture-size {
    width: 70px;
    height: 80px;
    margin-top: 10px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    background-color: var(--el-bg-color-page);
    border: 1px solid var(--el-border-color-lighter);
    border-radius: 4px;
    transition: all 0.5s;
    .rect {
        border: 2px solid #959da8;
        border-radius: 2px;
    }

    &:hover,
    &.active {
        background-color: var(--el-color-primary-light-9);
        border: 1px solid var(--el-color-primary);
        .rect {
            border: 2px solid var(--el-color-primary);
        }
        .size-scale,
        .size-name {
            color: var(--el-color-primary);
        }
    }
}
</style>
